<template>
  <div class="game" id="box">
    <div v-show="isOnload">
      <canvas id="canvas" width="1200" height="600"></canvas>
    </div>

    <button class="play" v-show="btnShow" @click="start">进入游戏</button>
  </div>
</template>

<script>
import { nextTick, onMounted, ref } from "@vue/runtime-core";
import init from "./js/index";
import { link } from "./js/linkSocket";

export default {
  setup() {
    let btnShow = ref(true);
    let isOnload = ref(false); //地图是否画好
    const start = async () => {
      isOnload.value = true;
      link();
      btnShow.value = false;
    };
    onMounted(() => {
      nextTick();
      init();
    });
    return {
      btnShow,
      isOnload,
      start
    };
  },
  components: {}
};
</script>

<style scoped lang="scss">
.game {
  width: 1200px;
  height: 600px;
  margin: 10px auto;
  position: relative;
  .play {
    position: absolute;
    top: 100px;
    left: 550px;
  }
}
</style>
